<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition  template="/templates/base_2.xhtml"
                 xmlns:p="http://primefaces.org/ui"
                 xmlns:h="http://java.sun.com/jsf/html"
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:ui="http://java.sun.com/jsf/facelets">
    <ui:define name="contenido">
        <p:messages id="messages"  autoUpdate="true"/>
        <f:view>
            <h:form id="carForm">               
                <p:fieldset id="workArea"
                            legend="#{beanDraggable.labelFielSet}"
                            style="width: 700px; min-height: 490px; float: left;">  
                    <p:outputPanel id="dropArea"
                                   style="widt:600px;">
                        <h:outputText value="!!!Drop here!!!"
                                      rendered="#{empty beanDraggable.workArea}"
                                      style="font-size:24px;border-color: #FFF;" />
                        <p:dataTable var="comp"
                                     style="border: none;border-color: #FFF;border: none;"
                                     value="#{beanDraggable.workArea}"
                                     rendered="#{not empty beanDraggable.workArea}">
                            <p:column headerText="Name" style="border-color: #FFF;">
                                <p:cellEditor>  
                                    <f:facet name="output">                                        
                                        <h:outputText value="#{comp.name}"                                                      
                                                      style="width:100%;border-color: #FFF;"/> 
                                    </f:facet>  
                                    <f:facet name="input">  
                                        <p:inputText value="#{comp.name}"
                                                     style="width:100%;border-color: #FFF;"/>  
                                    </f:facet>  
                                </p:cellEditor>
                            </p:column>
                            <p:column headerText="Type" style="border-color: #FFF;">
                                <p:cellEditor>  
                                    <f:facet name="output">                                        
                                        <h:outputText value="#{comp.formatType}"                                                      
                                                      style="width:100%;border-color: #FFF;"/> 
                                    </f:facet>  
                                    <f:facet name="input">  
                                        <p:inputText value="#{comp.formatType}"
                                                     style="width:100%;border-color: #FFF;"/>  
                                    </f:facet>  
                                </p:cellEditor>
                            </p:column>
                            <p:column headerText="Column" style="border-color: #FFF;">
                                <p:cellEditor>  
                                    <f:facet name="output">                                        
                                        <h:outputText value="#{comp.columnReference}"                                                      
                                                      style="width:100%;border-color: #FFF;"/> 
                                    </f:facet>  
                                    <f:facet name="input">  
                                        <p:inputText value="#{comp.columnReference}"
                                                     style="width:100%;border-color: #FFF;"/>  
                                    </f:facet>  
                                </p:cellEditor>
                            </p:column>
                            <p:column headerText="Column Label" style="border-color: #FFF;">
                                <p:cellEditor>  
                                    <f:facet name="output">                                        
                                        <h:outputText value="#{comp.columnLabel}"                                                      
                                                      style="width:100%;border-color: #FFF;"/> 
                                    </f:facet>  
                                    <f:facet name="input">  
                                        <p:inputText value="#{comp.columnLabel}"
                                                     style="width:100%;border-color: #FFF;"/>  
                                    </f:facet>  
                                </p:cellEditor>
                            </p:column>
                            <p:column headerText="Child Table" style="border-color: #FFF;">
                                <p:cellEditor>  
                                    <f:facet name="output">                                        
                                        <h:outputText value="#{comp.chilTable}"                                                      
                                                      style="width:100%;border-color: #FFF;"/> 
                                    </f:facet>  
                                    <f:facet name="input">  
                                        <p:inputText value="#{comp.chilTable}"
                                                     style="width:100%;border-color: #FFF;"/>  
                                    </f:facet>  
                                </p:cellEditor>
                            </p:column>
                            <p:column headerText="Edit" style="border-color: #FFF;width: 50px;">
                                <p:cellEditor>  
                                    <f:facet name="output">    
                                        <h:outputText value="#{comp.edit}"                                                      
                                                      style="width:100%;border-color: #FFF;"/> 
                                    </f:facet>  
                                    <f:facet name="input">  
                                        <p:inputText value="#{comp.edit}"
                                                     style="width:100%;border-color: #FFF;"/>  
                                    </f:facet>  

                                </p:cellEditor>
                            </p:column>
                            <p:column headerText="View" style="border-color: #FFF;width: 50px;">
                                <p:inputText style="width: 50px; border-color: #FFF;"
                                             rendered="#{comp.type.idComponentType eq 1 ? true:false}"/>
                                <p:selectOneMenu style="width: 50px;"
                                                 rendered="#{comp.type.idComponentType eq 2 ? true:false}"/>
                            </p:column>
                            <p:column headerText="" style="width:15px;border-color: #FFF;">  
                                <p:rowEditor />  
                            </p:column>  
                        </p:dataTable>
                    </p:outputPanel>                    
                </p:fieldset>
                <p:fieldset legend="Properties" >
                    <h:outputText value="Description"/>
                    <p:inputText value ="#{beanDraggable.title}" style="width: 215px"
                                 required="true"
                                 label="Description"/>
                    <p:separator />
                    <h:outputText value="Principal Table"/>
                    <p:inputText value ="#{beanDraggable.table}" style="width: 215px"
                                 required="true"
                                 label="Table"/>
                    <p:separator />
                    <p:dataGrid id="panelTool" var="comp"
                                value="#{beanDraggable.panelTools}" columns="1">
                        <p:column>
                            <p:panel id="pnl" header="#{comp.name}"
                                     style="text-align:center">
                                <h:panelGrid columns="1"
                                             style="width:100px">
                                    <p:inputText style="width: 150px"
                                                 rendered="#{comp.type.idComponentType eq 1 ? true:false}"/>                                    
                                    <p:selectOneMenu style="width: 150px"
                                                     rendered="#{comp.type.idComponentType eq 2 ? true:false}"/>
                                </h:panelGrid>
                            </p:panel>
                            <p:draggable for="pnl"
                                         helper="clone"
                                         handle=".ui-panel-titlebar"
                                         stack=".ui-panel"/>
                        </p:column>
                    </p:dataGrid>
                    <p:separator />
                    <p:commandButton value="#{beanDraggable.labelBotton}" 
                                     action="#{beanDraggable.nextForm}"
                                     update="carForm"/>                      
                </p:fieldset>
                <p:droppable for="workArea"
                             tolerance="touch"
                             activeStyleClass="ui-state-highlight"
                             datasource="panelTool"
                             onDrop="handleDrop">
                    <p:ajax listener="#{beanDraggable.onComponentDrop}"
                            update="dropArea panelTool" />
                </p:droppable>
            </h:form>
            <script type="text/javascript">
                function handleDrop(event, ui) {
                    ui.draggable.fadeOut('fast'); //fade out the dropped item
                }
            </script>
        </f:view>
    </ui:define>
</ui:composition>


